<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shallowReactive与reactive</title>
</head>
<body>
    <script src="index.js"></script>
    <script>
        // ---------------------浅拦截--------------------
        // const proxyUser1 = shallowReactive({
        //     name: '魁首',
        //     car: {
        //         color: 'red'
        //     }
        // })
        // // get,set 拦截 读写 数据
        // proxyUser1.name += '=='
        // // get 拦截 读取 数据
        // proxyUser1.car.color + '=='
        // // delete 拦截 删除 数据
        // delete proxyUser1.name
        // // delete 只拦截到了 读取 数据
        // delete proxyUser1.car.color 

        // ---------------------深拦截---------------------
        // const proxyUser2 = reactive({
        //     name: '魁首',
        //     car: {
        //         color: 'red'
        //     }
        // })
        // // get,set 拦截 读写 数据
        // proxyUser2.name += '=='
        // // get 拦截 读取 数据
        // proxyUser2.car.color + '=='
        // // delete 拦截 删除 数据
        // delete proxyUser2.name
        // // delete 拦
        // delete proxyUser2.car.color 

        // ================测试 shallowReadonly 和 readonly================
        // ---------------------浅只读--------------------
        // const proxyUser3 = shallowReadonly({
        //     name: '魁首',
        //     car: ['奔驰','福特']
        // })
        // // get 可读
        // console.log(proxyUser3.name)
        // // set 不能修改
        // proxyUser3.name = '=='
        // // delete 不能删除
        // delete proxyUser3.name
        // // delete 拦截到了 读取, 可以删除数据
        // delete proxyUser3.cars[0]
        // ---------------------深只读--------------------
        // const proxyUser4 = readonly({
        //     name: '魁首',
        //     car: ['奔驰','福特']
        // })
        // // 拦截读取
        // console.log(proxyUser4.name)
        // // 只读
        // proxyUser4.name = '领秀'
        // // 只读
        // proxyUser4.cars[0] = '1111'
        // delete proxyUser4.name
        // delete proxyUser4.cars[0]

        // ================测试 shallowReadonly 和 readonly================
        // ---------------------浅劫持--------------------
        // const sref = shallowRef({
        //     name: '1111',
        //     car: {
        //         color: 'red'
        //     }
        // })
        // console.log(sref.value)
        // // 劫持到
        // sref.value = '=='
        // // 劫持不到
        // sref.value.car = '=='

        // ---------------------深劫持--------------------
        // const ref1 = ref({
        //     name: '2222',
        //     car: {
        //         color: 'blue'
        //     }
        // })
        // console.log(ref1.value)
        // // 劫持到
        // sref.value = '=='
        // // 劫持到
        // sref.value.car = '=='

        // ================测试 isRef等================
        /* 测试判断函数 */
        console.log(isReactive(reactive({})))
        console.log(isRef(ref({})))
        console.log(isReadonly(readonly({})))
        console.log(isProxy(reactive({})))
        console.log(isProxy(readonly({})))

        
    </script>
</body>
</html>